<template>
    <view class="content">
        <u-sticky offset-top="1">

            <u-tabs :lineWidth="25" :list="statuslist" @click="selectTxRecord">
                <view slot="right" style="padding-left: 12px;margin-right:15px;">
                    <u-icon name="list" size="21" bold></u-icon>
                </view>
            </u-tabs>

        </u-sticky>


        <view class="search">
            <u-search class="left" placeholder="请输入关键词" @change="query" :bgColor="searchstyle" :borderColor="borderstyle"
                :showAction="false" v-model="keyword"></u-search>
            <view class="backtop">
                <u-button type="primary" @click="topback" class="custom-style" :plain="true" size="mini"
                    text="返回顶部"></u-button>

            </view>

        </view>


        <u-loading-icon :show="loadshow" :duration="3000" text="加载中" />


        <view v-if="empty == 'isempty'" class="empty">
            <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

            </u-empty>
        </view>


        <view class="section">

            <u-list :scrollTop="120" height="670" :style="height" :enableBackToTop="true" v-if="empty == 'notempty'"
                :preLoadScreen="page * 5" @scrolltolower="scrolltolower" :pagingEnabled="true">

                <u-list-item v-for="item in recordlist" :key=item.id>
                    <u-swipe-action>
                        <u-swipe-action-item @click="action" :name="item.id" :disabled="true" :options="options">
                            <view class="card">
                                <view class="left">

                                    <view class="text">
                                        <span class="label">申请员工:</span>
                                        <span>{{ item.empnickname_text }}</span>
                                    </view>

                                    <view class="text">
                                        <span class="label">提现状态:</span>
                                        <span>{{ item.status_text }}</span>

                                    </view>

                                    <view class="text">
                                        <span class="label">单号:</span>
                                        <span>{{ item.code }}</span>

                                    </view>
                                    <view class="text">
                                        <span class="label">申请时间:</span>
                                        <span>{{ item.createtime_text }}</span>
                                    </view>


                                </view>
                                <view class="destroy">
                                    <u-button type="error" @click="destroybtn(item.id)" :plain="true"
                                        :customStyle="{ width: '50px', height: '25px' }" :hairline="true" text="销毁"
                                        :size="mini"></u-button>

                                </view>
                                <view class="info">
                                    <u-button type="primary" @click="toinfo(item.id)" :plain="true"
                                        :customStyle="{ width: '50px', height: '25px' }" :hairline="true" text="详情"
                                        :size="mini"></u-button>

                                </view>
                                <view class="right">
                                    <view class="avatar">
                                        <u-image :showLoading="true" :shape="'circle'" :src="item.employee.avatar_text"
                                            width="50px" height="50px"></u-image>
                                        <view class="text">
                                            <span>{{ item.employee.nickname }}</span>
                                        </view>
                                    </view>
                                    <view class="text">
                                        <span>提现</span>
                                        <span>{{ item.amount }}</span>
                                    </view>





                                </view>
                            </view>

                        </u-swipe-action-item>


                    </u-swipe-action>

                </u-list-item>

                <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
                    :nomore-text="nomoreText" />






            </u-list>
        </view>
        <!-- 消息提醒 -->
        <u-toast ref="notice"></u-toast>

        <!-- 模态框 -->
        <u-modal :show="show" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" />


    </view>
</template>

<script>
export default {

    onLoad(e) {

        this.empid = uni.getStorageSync("empid") !=1 ? uni.getStorageSync("empid") : ""

        this.auth = this.$u.auth.check()

        this.list()
        this.txStatus()
        this.count()

    },
    created() {

        this.timer = setInterval(() => {

            let a = this.$u.count.check()

        }, 15000);

    },

    beforeDestroy() {
        clearInterval(this.timer)
    },

    data() {
        return {
            status: 'loadmore',
            loadingText: '努力加载中',
            loadmoreText: '下拉加载更多',
            nomoreText: '没有更多数据了',
            padding: '150rpx 0rpx',
            empid: "",
            stoid: "",
            date: "",
            showdate: false,
            comssid: 0,
            pass: 0,
            type: "",
            num: 0,
            options: [

                {
                    text: "添加",
                    style: {
                        backgroundColor: "#3c9cff",
                    },
                },
                {
                    text: "销毁",
                    style: {
                        backgroundColor: "#f56c6c",
                    },
                },
            ],
            content: "是否销毁该数据",

            auth: {},
            page: 1,
            comissid: 0,//提成记录id
            empty: "",
            keyword: '',
            searchstyle: "#ffffff",
            borderstyle: "#eee",
            recordlist: [],
            loadshow: false,
            show: false,
            statuslist: [],
            countlist: [],

        }
    },
    methods: {

        confirmdate(e) {
            console.log(e);
        },
        async count() {
            let data = {
                adminid: this.auth.id,
                stoid: this.auth.stoid,
                date: this.date,
                empid: this.empid

            }
            let result = await this.$u.api.admin.ordercount(data)

            if (result.code) {
                this.chartData = result.data
            }

        },

        selectTxRecord(e) {
            console.log(e)
            this.num = e.status
            this.list()
        },
        action(item) {
            // 添加
            if (item.index == 0) {
                uni.$u.route({
                    url: "/pagesC/product/brank/add",
                })
            }
            // 销毁
            if (item.index == 1) {
                this.show = true
                this.brand_id = item.name
            }

        },
        async confirm() {
            this.show = false

            var data = {
                empid: this.empid,
                adminid: this.auth.id,
                comssid: this.comssid

            }


            var result = await this.$u.api.admin.destroy(data)

            if (result.code) {
                this.$refs.notice.show({
                    type: "success",
                    message: result.msg,
                    duration: 2000,

                })
                setTimeout(() => {
                    this.list();
                    this.txStatus()

                }, 350)


            } else {
                this.$refs.notice.show({
                    type: "error",
                    message: result.msg,
                    duration: 2000
                })
            }

        },
        cancel() {
            this.show = false
        },
        closedate() {
            this.showdate = false
        },
        query(e) {
            this.page = 1

            // 直接赋值
            this.keyword = e
            // 然后调用
            this.list()

        },
        async list() {
            // 最高管理员需传输的数据
            let data = {
                stoid: this.auth.stoid,
                page: this.page,
                date: this.date,
                num: this.num,
                adminid: this.auth.id,
                empid: this.empid,
                keyword: this.keyword,

            }

            let result = await this.$u.api.admin.TixianRecord(data)

            this.loadshow = false



            if (result.code) {


                if (Array.isArray(result.data) && result.data.length > 0) {
                    this.empty = "notempty"

                    this.recordlist = []
                    this.recordlist = this.recordlist.concat(result.data)


                    this.loadshow = false

                } else {

                    this.empty = "isempty"

                }

            } else {

                this.empty = "isempty"

            }




        },

        toinfo(e) {
            // 给一个预约不让他按销毁按钮跳进去详情页

            uni.$u.route(
                "/pagesA/admin/commissioninfo", {
                comissid: e,

            })

        },
        scrolltolower() {
            this.loadshow = true

            setTimeout(() => {
                this.status = "loading"
            }, 1200)


            this.page++
            this.list()


        },
        async topback() {
            this.page = 1
            this.list()

        },
        destroybtn(e) {
            this.comssid = e
            this.show = true

        },
        async txStatus() {
            let data = {
                empid: this.empid
            }

            let result = await this.$u.api.admin.txstatuslist(data)
            if (result.code) {
                this.statuslist = result.data
            }
        },



    }
}
</script>

<style scoped  lang="scss" >
.content {
    width: 100%;
    position: relative;
}

.section {
    height: 520px;
    position: fixed;
    width: 100%;
    top: 100px;
    left: 0px;

    overflow-y: hidden;
}

.backtop {
    width: 20px;
    color: "blue";
    margin-left: 15px;
}

.empty {
    margin-top: 120px;
}

.search {
    width: 80%;
    position: fixed;
    top: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 9%;
    z-index: 999;

}


.card {
    display: flex;
    width: 92%;
    height: 135px;
    margin: 0 auto;
    border-radius: 2%;
    padding-top: 10px;
    position: relative;
    border: 1px solid #eee;
    margin-top: 15px;
    box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;



    .left {
        width: 160px !important;

        .text {
            width: 230px;
            padding: 4px 15px;

            h4 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }

            span {
                font-size: 12px;
                padding-left: 10px;
                color: #888;
            }

            .label {
                color: #888;



            }


        }
    }

    .right {
        margin-left: 80px;

        .avatar {
            padding: 10px 20px;
            text-align: center;
        }

        .text {

            padding: 3px;

            h4 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }

            span {
                font-size: 12px;
                color: #888;
                font-weight: bold;

            }

            span:nth-of-type(2) {
                padding-left: 10px;
            }
        }
    }
}

.content {
    background: #ffffff;
}

.destroy {
    height: 35px;
    padding-top: 20px;
    position: absolute;
    left: 135px;
    top: 10px;
}

.info {
    height: 35px;
    padding-top: 20px;
    position: absolute;
    left: 195px;
    top: 10px;
}

.charts-box {
    width: 100%;
    height: 230px;
    position: fixed;
    top: 90px;
    left: 0px;
    z-index: 9999;
}
</style>